<template>
  <div>
    <div v-if="easyFlowVisible" style="height: calc(100vh);">
      <el-row>
        <!--顶部工具菜单-->
        <el-col :span="24">
          <div class="ef-tooltar">
            <el-link type="primary" :underline="false">{{data.name}}</el-link>
            <el-divider direction="vertical"></el-divider>
            <el-button type="text" icon="el-icon-delete" size="large" @click="deleteElement" :disabled="!this.activeElement.type"></el-button>
            <el-divider direction="vertical"></el-divider>
            <el-button type="text" icon="el-icon-download" size="large" @click="downloadData"></el-button>
            <el-divider direction="vertical"></el-divider>
            <el-button type="text" icon="el-icon-plus" size="large" @click="zoomAdd"></el-button>
            <el-divider direction="vertical"></el-divider>
            <el-button type="text" icon="el-icon-minus" size="large" @click="zoomSub"></el-button>
            <div style="float: right;margin-right: 5px">
              <el-button type="info" plain round icon="el-icon-document" @click="dataInfo" size="mini">流程信息</el-button>
              <el-button type="primary" plain round icon="el-icon-refresh" @click="dataTypeAdd" size="mini">数据类型</el-button>
              <el-button type="primary" plain round @click="dataReloadA" icon="el-icon-refresh" size="mini">达蒙demo</el-button>
             <!--  <el-button type="primary" plain round @click="dataReloadB" icon="el-icon-refresh" size="mini">切换流程B</el-button>
              <el-button type="primary" plain round @click="dataReloadC" icon="el-icon-refresh" size="mini">切换流程C</el-button>
              <el-button type="primary" plain round @click="dataReloadD" icon="el-icon-refresh" size="mini">自定义样式</el-button>
              <el-button type="primary" plain round @click="dataReloadE" icon="el-icon-refresh" size="mini">力导图</el-button> -->
              <el-button type="info" plain round icon="el-icon-document" @click="openHelp" size="mini">帮助</el-button>
            </div>
          </div>
        </el-col>
      </el-row>
      <div style="display: flex;height: calc(100% - 47px);">
        <div style="width: 230px;border-right: 1px solid #dce3e8;">
          <node-menu @addNode="addNode" ref="nodeMenu"></node-menu>
        </div>
        <div id="efContainer" ref="efContainer" class="container" v-flowDrag>
          <template v-for="node in data.nodeList">
            <flow-node :id="node.id" :key="node.id" :node="node" :activeElement="activeElement" @changeNodeSite="changeNodeSite"
              @nodeRightMenu="nodeRightMenu" @clickNode="clickNode">
            </flow-node>
          </template>
          <!-- 给画布一个默认的宽度和高度 -->
          <div style="position:absolute;top: 2000px;left: 2000px;">&nbsp;</div>
        </div>
        <!-- 右侧表单 -->
        <div style="width: 450px;border-left: 1px solid #dce3e8;background-color: #FBFBFB">
          <flow-node-form ref="nodeForm" @setLineLabel="setLineLabel" @repaintEverything="repaintEverything"></flow-node-form>
        </div>
      </div>
      <!-- 流程数据详情 -->
      <flow-info v-if="flowInfoVisible" ref="flowInfo" :data="data"></flow-info>
      <flow-help v-if="flowHelpVisible" ref="flowHelp"></flow-help>
    </div>

    <el-dialog title="数据类型" :visible.sync="dataTypeForm.open" width="70%" append-to-body :close-on-click-modal="false"
      :close-on-press-escape="true">

      <el-tabs v-model="dataTypeForm.activeName" type="card" @tab-click="tabClick">
        <el-tab-pane label="数据类型列表" name="list">
          <el-table :data="data.dataTypeList" @selection-change="handleSelectionChange">
            <el-table-column type="index" width="55" align="center" />
            <el-table-column label="类型名称" width="100" align="center" prop="dataTypeName" />
            <el-table-column label="类型编码" width="100" align="center" prop="dataTypeCode" />
            <el-table-column label="类型说明" align="center" prop="dataTypeDesc" show-overflow-tooltip />
            <el-table-column fixed="right" label="操作" align="center" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button v-if="scope.row.dataTypeCode.indexOf('Edm') == -1" size="mini" type="text" icon="el-icon-edit"
                  @click="dataTypeEdit(scope.row)">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="自定义数据类型" name="edit">
          <el-form ref="dataTypeFormRef" :model="dataTypeForm.form" :rules="dataTypeForm.formRules" label-width="100px">
            <el-form-item label="类型名称" prop="dataTypeName">
              <el-input :disabled="dataTypeForm.edit" v-model="dataTypeForm.form.dataTypeName"></el-input>
            </el-form-item>
            <el-form-item label="类型编码" prop="dataTypeCode">
              <el-input :disabled="dataTypeForm.edit" v-model="dataTypeForm.form.dataTypeCode"></el-input>
            </el-form-item>
            <el-form-item label="类型说明" prop="dataTypeDesc">
              <el-input v-model="dataTypeForm.form.dataTypeDesc"></el-input>
            </el-form-item>

            <el-row :gutter="10" class="mb8">
              <el-col :span="1.5">
                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="tableAdd">新增字段</el-button>
              </el-col>
            </el-row>

            <el-table ref="mytable" :data="dataTypeForm.form.propList" style="width: 100%" @selection-change="tableSelectionChange">
              <el-table-column v-if="dataTypeForm.radio" type="index" width="50"></el-table-column>
              <el-table-column v-if="dataTypeForm.selection" type="selection" width="55"></el-table-column>
              <el-table-column align="center" v-for="(item,index,key) in dataTypeForm.table_columns" :item="item" :key="key"
                :index="index" :label="item.label" :width="item.width">
                <template slot-scope="scope">
                  <el-input v-if="scope.row.edit && item.editType == 'input'" size="small" v-model="scope.row[item.prop]"
                    :placeholder="'请输入'+item.label"></el-input>
                  <el-date-picker v-if="scope.row.edit && item.editType == 'date'" size="small" style="width: 100%;"
                    v-model="scope.row[item.prop]" type="date" value-format="yyyy-MM-dd" placeholder="选择日期">
                  </el-date-picker>
                  <el-select v-if="scope.row.edit && item.editType == 'select'" size="small" filterable clearable style="width: 100%"
                    v-model="scope.row[item.prop]" :placeholder="'请输入'+item.label">
                    <el-option v-for="dict in dataTypeForm[item.selectData]" :key="dict.dictValue" :label="dict.dictLabel"
                      :value="dict.dictValue" />
                  </el-select>
                  <span v-if="!scope.row.edit">{{scope.row[item.prop]}}</span>
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center" width="150">
                <template slot-scope="scope">
                  <!-- 全局控制的编辑 -->
                  <div v-if="dataTypeForm.is_edit&&scope.row.add==undefined" style="display: inline-block;">
                    <!-- 编辑 -->
                    <el-button size="mini" v-if="!scope.row.edit" @click="tableEdit(scope.$index, scope.row)" type="primary">编辑</el-button>
                    <!-- 保存 -->
                    <el-button size="mini" type="success" :plain="true" v-if="scope.row.edit" @click="tableSave(scope.$index, scope.row)">确认</el-button>
                  </div>
                  <!-- 添加控制 -->
                  <div v-if="scope.row.add!=undefined&&scope.row.add" style="display: inline-block;">
                    <!-- 保存 -->
                    <el-button size="mini" type="success" :plain="true" v-if="scope.row.edit" @click="tableSave(scope.$index, scope.row)">确认</el-button>
                  </div>
                  <!-- 全局控制删除 -->
                  <el-button size="mini" v-if="dataTypeForm.is_delete&&scope.row.add==undefined" :plain="true" type="danger"
                    @click="tableDelete(scope.$index, scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>

          </el-form>
          <div class="dialog-footer" style="float: right;padding-top: 5px;">
            <el-button type="primary" @click="dataTypeSave">保 存</el-button>
            <el-button @click="dataTypeAdd">取 消</el-button>
          </div>

        </el-tab-pane>

      </el-tabs>

    </el-dialog>
  </div>


</template>

<script>
  import draggable from 'vuedraggable'
  // import { jsPlumb } from 'jsplumb'
  // 使用修改后的jsplumb
  import './jsplumb'
  import {
    easyFlowMixin
  } from '@/components/ef/mixins'
  import flowNode from '@/components/ef/node'
  import nodeMenu from '@/components/ef/node_menu'
  import FlowInfo from '@/components/ef/info'
  import FlowHelp from '@/components/ef/help'
  import FlowNodeForm from './node_form'
  import lodash from 'lodash'
  import {
    getDataA
  } from './data_A'
  import {
    getDataB
  } from './data_B'
  import {
    getDataC
  } from './data_C'
  import {
    getDataD
  } from './data_D'
  import {
    getDataE
  } from './data_E'
  import {
    ForceDirected
  } from './force-directed'

  export default {
    data() {
      return {

        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,

        // jsPlumb 实例
        jsPlumb: null,
        // 控制画布销毁
        easyFlowVisible: true,
        // 控制流程数据显示与隐藏
        flowInfoVisible: false,
        // 是否加载完毕标志位
        loadEasyFlowFinish: false,
        flowHelpVisible: false,
        // 数据
        data: {},
        // 激活的元素、可能是节点、可能是连线
        activeElement: {
          // 可选值 node 、line
          type: undefined,
          // 节点ID
          nodeId: undefined,
          // 连线ID
          sourceId: undefined,
          targetId: undefined
        },
        zoom: 0.5,
        dataTypeForm: {
          open: false,
          activeName: "list",
          edit : false,
          dataTypeOptions: [],
          isCollectOptions: [{
            "dictLabel": "否",
            "dictValue": "0"
          }, {
            "dictLabel": "是",
            "dictValue": "1"
          }],
          form: {
             propList: [],
          },
          formRules: {
            dataTypeName: [{
              required: true,
              message: '数据类型名称不能为空',
              trigger: 'blur'
            }],
            dataTypeCode: [{
              required: true,
              message: '数据类型编码不能为空',
              trigger: 'blur'
            }],
            dataTypeDesc: [{
              required: true,
              message: '数据类型描述不能为空',
              trigger: 'blur'
            }]
          },
          is_edit: true, //是否可编辑
          is_delete: true, //是否可删除
          selection: false, //是否需要复选框
          radio: false, //单选变色
          space_color: true, //隔行变色
          //表头信息
          table_columns: [{
            prop: "propName",
            label: "*字段名称",
            editType: 'input'
          }, {
            prop: "propType",
            label: "*字段类型",
            editType: 'select',
            selectData: "dataTypeOptions"
          }, {
            prop: "propDesc",
            label: "*字段描述",
            editType: 'input'
          }, {
            prop: "isCollect",
            label: "*是否集合",
            editType: 'select',
            selectData: "isCollectOptions"
          }]
        }
      }
    },
    // 一些基础配置移动该文件中
    mixins: [easyFlowMixin],
    components: {
      draggable,
      flowNode,
      nodeMenu,
      FlowInfo,
      FlowNodeForm,
      FlowHelp
    },
    directives: {
      'flowDrag': {
        bind(el, binding, vnode, oldNode) {
          if (!binding) {
            return
          }
          el.onmousedown = (e) => {
            if (e.button == 2) {
              // 右键不管
              return
            }
            //  鼠标按下，计算当前原始距离可视区的高度
            let disX = e.clientX
            let disY = e.clientY
            el.style.cursor = 'move'

            document.onmousemove = function(e) {
              // 移动时禁止默认事件
              e.preventDefault()
              const left = e.clientX - disX
              disX = e.clientX
              el.scrollLeft += -left

              const top = e.clientY - disY
              disY = e.clientY
              el.scrollTop += -top
            }

            document.onmouseup = function(e) {
              el.style.cursor = 'auto'
              document.onmousemove = null
              document.onmouseup = null
            }
          }
        }
      }
    },
    mounted() {
      this.jsPlumb = jsPlumb.getInstance()
      this.$nextTick(() => {
        // 默认加载流程A的数据、在这里可以根据具体的业务返回符合流程数据格式的数据即可
        this.dataReload(getDataA())
      })
    },
    methods: {
      // 返回唯一标识
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection;
        this.single = selection.length != 1
        this.multiple = !selection.length
      },

      getUUID() {
        return Math.random().toString(36).substr(3, 10)
      },
      jsPlumbInit() {
        this.jsPlumb.ready(() => {
          // 导入默认配置
          this.jsPlumb.importDefaults(this.jsplumbSetting)
          // 会使整个jsPlumb立即重绘。
          this.jsPlumb.setSuspendDrawing(false, true);
          // 初始化节点
          this.loadEasyFlow()
          // 单点击了连接线, https://www.cnblogs.com/ysx215/p/7615677.html
          this.jsPlumb.bind('click', (conn, originalEvent) => {
            this.activeElement.type = 'line'
            this.activeElement.sourceId = conn.sourceId
            this.activeElement.targetId = conn.targetId
            this.$refs.nodeForm.lineInit({
              from: conn.sourceId,
              to: conn.targetId,
              label: conn.getLabel()
            })
          })
          // 连线
          this.jsPlumb.bind("connection", (evt) => {
            let from = evt.source.id
            let to = evt.target.id
            if (this.loadEasyFlowFinish) {
              this.data.lineList.push({
                from: from,
                to: to
              })
            }
          })

          // 删除连线回调
          this.jsPlumb.bind("connectionDetached", (evt) => {
            this.deleteLine(evt.sourceId, evt.targetId)
          })

          // 改变线的连接节点
          this.jsPlumb.bind("connectionMoved", (evt) => {
            this.changeLine(evt.originalSourceId, evt.originalTargetId)
          })

          // 连线右击
          this.jsPlumb.bind("contextmenu", (evt) => {
            console.log('contextmenu', evt)
          })

          // 连线
          this.jsPlumb.bind("beforeDrop", (evt) => {
            let from = evt.sourceId
            let to = evt.targetId
            if (from === to) {
              this.$message.error('节点不支持连接自己')
              return false
            }
            if (this.hasLine(from, to)) {
              this.$message.error('该关系已存在,不允许重复创建')
              return false
            }
            if (this.hashOppositeLine(from, to)) {
              this.$message.error('不支持两个节点之间连线回环');
              return false
            }
            this.$message.success('连接成功')
            return true
          })

          // beforeDetach
          this.jsPlumb.bind("beforeDetach", (evt) => {
            console.log('beforeDetach', evt)
          })
          this.jsPlumb.setContainer(this.$refs.efContainer)
        })
      },
      // 加载流程图
      loadEasyFlow() {
        // 初始化节点
        for (var i = 0; i < this.data.nodeList.length; i++) {
          let node = this.data.nodeList[i]
          // 设置源点，可以拖出线连接其他节点
          this.jsPlumb.makeSource(node.id, lodash.merge(this.jsplumbSourceOptions, {}))
          // // 设置目标点，其他源点拖出的线可以连接该节点
          this.jsPlumb.makeTarget(node.id, this.jsplumbTargetOptions)
          if (!node.viewOnly) {
            this.jsPlumb.draggable(node.id, {
              containment: 'parent',
              stop: function(el) {
                // 拖拽节点结束后的对调
                console.log('拖拽结束: ', el)
              }
            })
          }
        }
        // 初始化连线
        for (var i = 0; i < this.data.lineList.length; i++) {
          let line = this.data.lineList[i]
          var connParam = {
            source: line.from,
            target: line.to,
            label: line.label ? line.label : '',
            connector: line.connector ? line.connector : '',
            anchors: line.anchors ? line.anchors : undefined,
            paintStyle: line.paintStyle ? line.paintStyle : undefined,
          }
          this.jsPlumb.connect(connParam, this.jsplumbConnectOptions)
        }
        this.$nextTick(function() {
          this.loadEasyFlowFinish = true
        })
      },
      // 设置连线条件
      setLineLabel(from, to, label) {
        var conn = this.jsPlumb.getConnections({
          source: from,
          target: to
        })[0]
        if (!label || label === '') {
          conn.removeClass('flowLabel')
          conn.addClass('emptyFlowLabel')
        } else {
          conn.addClass('flowLabel')
        }
        conn.setLabel({
          label: label,
        })
        this.data.lineList.forEach(function(line) {
          if (line.from == from && line.to == to) {
            line.label = label
          }
        })

      },
      // 删除激活的元素
      deleteElement() {
        if (this.activeElement.type === 'node') {
          this.deleteNode(this.activeElement.nodeId)
        } else if (this.activeElement.type === 'line') {
          this.$confirm('确定删除所点击的线吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            var conn = this.jsPlumb.getConnections({
              source: this.activeElement.sourceId,
              target: this.activeElement.targetId
            })[0]
            this.jsPlumb.deleteConnection(conn)
          }).catch(() => {})
        }
      },
      // 删除线
      deleteLine(from, to) {
        this.data.lineList = this.data.lineList.filter(function(line) {
          if (line.from == from && line.to == to) {
            return false
          }
          return true
        })
      },
      // 改变连线
      changeLine(oldFrom, oldTo) {
        this.deleteLine(oldFrom, oldTo)
      },
      // 改变节点的位置
      changeNodeSite(data) {
        for (var i = 0; i < this.data.nodeList.length; i++) {
          let node = this.data.nodeList[i]
          if (node.id === data.nodeId) {
            node.left = data.left
            node.top = data.top
          }
        }
      },
      /**
       * 拖拽结束后添加新的节点
       * @param evt
       * @param nodeMenu 被添加的节点对象
       * @param mousePosition 鼠标拖拽结束的坐标
       */
      addNode(evt, nodeMenu, mousePosition) {
        var screenX = evt.originalEvent.clientX,
          screenY = evt.originalEvent.clientY
        let efContainer = this.$refs.efContainer
        var containerRect = efContainer.getBoundingClientRect()
        var left = screenX,
          top = screenY
        // 计算是否拖入到容器中
        if (left < containerRect.x || left > containerRect.width + containerRect.x || top < containerRect.y ||
          containerRect.y > containerRect.y + containerRect.height) {
          this.$message.error("请把节点拖入到画布中")
          return
        }
        left = left - containerRect.x + efContainer.scrollLeft
        top = top - containerRect.y + efContainer.scrollTop
        // 居中
        left -= 85
        top -= 16
        var nodeId = this.getUUID()
        // 动态生成名字
        var origName = nodeMenu.name
        var nodeName = origName
        var index = 1
        while (index < 10000) {
          var repeat = false
          for (var i = 0; i < this.data.nodeList.length; i++) {
            let node = this.data.nodeList[i]
            if (node.name === nodeName) {
              nodeName = origName + index
              repeat = true
            }
          }
          if (repeat) {
            index++
            continue
          }
          break
        }
        var node = {
          id: nodeId,
          name: nodeName,
          type: nodeMenu.type,
          left: left + 'px',
          top: top + 'px',
          ico: nodeMenu.ico,
          state: 'success'
        }
        /**
         * 这里可以进行业务判断、是否能够添加该节点
         */
        this.data.nodeList.push(node)
        this.$nextTick(function() {
          this.jsPlumb.makeSource(nodeId, this.jsplumbSourceOptions)
          this.jsPlumb.makeTarget(nodeId, this.jsplumbTargetOptions)
          this.jsPlumb.draggable(nodeId, {
            containment: 'parent',
            stop: function(el) {
              // 拖拽节点结束后的对调
              console.log('拖拽结束: ', el)
            }
          })
        })
      },
      /**
       * 删除节点
       * @param nodeId 被删除节点的ID
       */
      deleteNode(nodeId) {
        this.$confirm('确定要删除节点' + nodeId + '?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          closeOnClickModal: false
        }).then(() => {
          /**
           * 这里需要进行业务判断，是否可以删除
           */
          this.data.nodeList = this.data.nodeList.filter(function(node) {
            if (node.id === nodeId) {
              // 伪删除，将节点隐藏，否则会导致位置错位
              // node.show = false
              return false
            }
            return true
          })
          this.$nextTick(function() {
            this.jsPlumb.removeAllEndpoints(nodeId);
          })
        }).catch(() => {})
        return true
      },
      clickNode(nodeId) {
        this.activeElement.type = 'node'
        this.activeElement.nodeId = nodeId
        this.$refs.nodeForm.nodeInit(this.data, nodeId)
      },
      // 是否具有该线
      hasLine(from, to) {
        for (var i = 0; i < this.data.lineList.length; i++) {
          var line = this.data.lineList[i]
          if (line.from === from && line.to === to) {
            return true
          }
        }
        return false
      },
      // 是否含有相反的线
      hashOppositeLine(from, to) {
        return this.hasLine(to, from)
      },
      nodeRightMenu(nodeId, evt) {
        this.menu.show = true
        this.menu.curNodeId = nodeId
        this.menu.left = evt.x + 'px'
        this.menu.top = evt.y + 'px'
      },
      repaintEverything() {
        this.jsPlumb.repaint()
      },
      // 流程数据信息
      dataInfo() {
        this.flowInfoVisible = true
        this.$nextTick(function() {
          this.$refs.flowInfo.init()
        })
      },
      dataTypeAdd() {
        this.dataTypeForm.activeName = "list";
        this.dataTypeForm.open = !this.dataTypeForm.open;
      },
      dataTypeEdit(row) {
        debugger;
        this.dataTypeForm.activeName = "edit";
        this.dataTypeForm.edit = true;
        this.dataTypeForm.form = JSON.parse(JSON.stringify(row));
        // 初始化类型
        this.dataTypeForm.dataTypeOptions = []
        let dataTypeOptions = this.dataTypeForm.dataTypeOptions;
        this.data.dataTypeList.forEach(function(d) {
          if (row.dataTypeName != d.dataTypeName && row.dataTypeCode != d.dataTypeCode) {
            dataTypeOptions.push({
              "dictLabel": d.dataTypeName,
              "dictValue": d.dataTypeCode
            });
          }
        })
      },
      dataTypeSave() {
        let typeName = this.dataTypeForm.form.dataTypeName;
        let typeCode = this.dataTypeForm.form.dataTypeCode;

        const index = this.data.dataTypeList.findIndex(item => item.dataTypeName == typeName || item.dataTypeCode ==
          typeCode)
         let form = JSON.parse(JSON.stringify(this.dataTypeForm.form));
         // 判断是否是更新操作
        if(this.dataTypeForm.edit){
            this.data.dataTypeList[index] = form
        }else{
          // 新增操作
            // 校验是否重复
          if (index >= 0) {
            this.$message({
              message: '该类型已经存在，请勿重复添加',
              type: 'error'
            });
            return;
          }
          this.data.dataTypeList.push(form);
        }
        this.dataTypeForm.activeName = "list";
        this.dataTypeForm.form = {}; // 重置表单
        this.dataTypeForm.edit = false;
        this.$message({
          message: '操作成功',
          type: 'success'
        });
      },
      tabClick() {
        // 初始化类型
       this.dataTypeForm.dataTypeOptions = []
       let dataTypeOptions = this.dataTypeForm.dataTypeOptions;
       this.data.dataTypeList.forEach(function(d) {
         dataTypeOptions.push({
           "dictLabel": d.dataTypeName,
           "dictValue": d.dataTypeCode
         });
       })
      },
      // 加载流程图
      dataReload(data) {
        this.easyFlowVisible = false
        this.data.nodeList = []
        this.data.lineList = []
        this.$nextTick(() => {
          data = lodash.cloneDeep(data)
          this.easyFlowVisible = true
          this.data = data
          this.$nextTick(() => {
            this.jsPlumb = jsPlumb.getInstance()
            this.$nextTick(() => {
              this.jsPlumbInit()
            })
          })
        })
      },
      // 模拟载入数据dataA
      dataReloadA() {
        this.dataReload(getDataA())
      },
      // 模拟载入数据dataB
      dataReloadB() {
        this.dataReload(getDataB())
      },
      // 模拟载入数据dataC
      dataReloadC() {
        this.dataReload(getDataC())
      },
      // 模拟载入数据dataD
      dataReloadD() {
        this.dataReload(getDataD())
      },
      // 模拟加载数据dataE，自适应创建坐标
      dataReloadE() {
        let dataE = getDataE()
        let tempData = lodash.cloneDeep(dataE)
        let data = ForceDirected(tempData)
        this.dataReload(data)
        this.$message({
          message: '力导图每次产生的布局是不一样的',
          type: 'warning'
        });
      },
      zoomAdd() {
        if (this.zoom >= 1) {
          return
        }
        this.zoom = this.zoom + 0.1
        this.$refs.efContainer.style.transform = `scale(${this.zoom})`
        this.jsPlumb.setZoom(this.zoom)
      },
      zoomSub() {
        if (this.zoom <= 0) {
          return
        }
        this.zoom = this.zoom - 0.1
        this.$refs.efContainer.style.transform = `scale(${this.zoom})`
        this.jsPlumb.setZoom(this.zoom)
      },
      // 下载数据
      downloadData() {
        this.$confirm('确定要下载该流程数据吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          closeOnClickModal: false
        }).then(() => {
          var datastr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(this.data, null, '\t'));
          var downloadAnchorNode = document.createElement('a')
          downloadAnchorNode.setAttribute("href", datastr);
          downloadAnchorNode.setAttribute("download", 'data.json')
          downloadAnchorNode.click();
          downloadAnchorNode.remove();
          this.$message.success("正在下载中,请稍后...")
        }).catch(() => {})
      },
      openHelp() {
        this.flowHelpVisible = true
        this.$nextTick(function() {
          this.$refs.flowHelp.init()
        })
      },
      //多选框
      tableSelectionChange(val) {
        this.multipleSelection = val;
        console.log("selection:", this.multipleSelection);
      },
      //编辑
      tableEdit(index, row) {
        row.edit = true;
      },
      //删除
      tableDelete(index, row) {
        this.dataTypeForm.form.propList.splice(index, 1);
      },
      //保存
      tableSave(index, row) {
        row.edit = false;
        delete this.dataTypeForm.form.propList[index].add;
      },
      tableAdd() {
        var addDataJson = {};
        for (var key in this.new_date_json) {
          if (key === "edit") {
            delete addDataJson[key];
          } else if (key === "add") {
            delete addDataJson[key];
          } else {
            addDataJson[key] = "";
          }
        }
        addDataJson.edit = true;
        addDataJson.add = true;
        this.dataTypeForm.form.propList.push(addDataJson);
      }
    }
  }
</script>
